<template>
  <div>
    <button @click="myCoupons()" class="my-coupon-button">我的优惠券</button>

    <!-- 图片展示 -->
    <img class="square-image" src="http://127.0.0.1:9300/statics/2025/01/14/屏幕截图 2025-01-14 152329_20250114202514A001.png" />

    <!-- 按钮组 -->
    <div class="button-group">
      <el-button size="mini" type="primary" @click="fetchCoupons(1)">精选</el-button>
      <el-button size="mini" type="danger" @click="fetchCoupons(0)">全选</el-button>
    </div>

    <!-- 优惠券列表 -->
    <div class="coupon-list">
      <div v-for="coupon in couponList" :key="coupon.id" class="coupon-item">
        <div class="coupon-header">
          <div class="coupon-type" :style="couponTypeStyle(coupon.couponType)"></div>
          <div class="coupon-title">{{ couponTypeText(coupon.couponType) }}</div>
        </div>
        <div class="coupon-content">
          <p>￥{{ coupon.discountPrice }}</p>
          <p v-if="coupon.couponType === 1">满{{ coupon.useThreshold }}元减{{ coupon.minusPrice }}元</p>
          <p v-if="coupon.couponType === 2">{{ coupon.discountNum }}折</p>
          <p v-if="coupon.couponType === 3">随机金额{{ coupon.minimumPrice }}至{{ coupon.maximumPrice }}元</p>
          <p>有效期: {{ coupon.effectiveStart }}至{{ coupon.effectiveEnd }}</p>
          <p>使用规则:
            <span v-if="coupon.applyStatus === 0">全部可用</span>
            <span v-else-if="coupon.applyStatus === 1">指定商品可用</span>
            <span v-else-if="coupon.applyStatus === 2">指定分类可用</span>
          </p>
          <el-button type="primary" @click="showDialog(coupon)">立即领取</el-button>
        </div>
      </div>
    </div>

    <!-- 对话框 -->
    <el-dialog title="提示" v-model="dialogVisible" width="30%" :before-close="handleClose">
      <el-form label-width="80px" :model="pmsUserCoupon">
        <el-form-item label="用户id">
          <el-input v-model="pmsUserCoupon.userId"></el-input>
        </el-form-item>
        <el-form-item label="优惠卷id">
          <el-input v-model="pmsUserCoupon.couponId"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="pmsUserCoupon.status"></el-input>
        </el-form-item>
        <el-form-item label="订单id">
          <el-input v-model="pmsUserCoupon.orderId"></el-input>
        </el-form-item>
        <el-form-item label="领取时间">
          <el-input v-model="pmsUserCoupon.receiveTime"></el-input>
        </el-form-item>
        <el-form-item label="使用时间">
          <el-input v-model="pmsUserCoupon.useTime"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listCoupon } from "@/api/coupon/coupon.js";

export default {
  name: "index",
  data() {
    return {
      pmsUserCoupon: {},
      couponList: [],
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    fetchCoupons(recommendStatus) {
      console.log('Fetching coupons with status:', recommendStatus);
      listCoupon(recommendStatus).then(res => {
        this.couponList = res.data;
      });
    },
    myCoupons() {
      this.$router.push("/mycoupon");
    },
    couponTypeStyle(type) {
      const styles = {
        1: { backgroundColor: '#FF5733', color: '#fff' },
        2: { backgroundColor: '#33FF57', color: '#000' },
        3: { backgroundColor: '#3357FF', color: '#fff' },
      };
      return styles[type];
    },
    couponTypeText(type) {
      const texts = {
        1: '满减券',
        2: '折扣券',
        3: '随机金额券',
      };
      return texts[type];
    },
    showDialog(coupon) {
      // 可以在这里添加一些处理逻辑，比如初始化表单数据等
      this.dialogVisible = true;
      // 示例：初始化用户ID和优惠券ID（仅示例，实际可能不需要这样初始化）
      this.pmsUserCoupon.userId = 'user123';
      this.pmsUserCoupon.couponId = coupon.id;
    },
  },
  created() {
    this.fetchCoupons(1);
  },
};
</script>

<style scoped>
.my-coupon-button {
  background-color: #FF6347; /* 更深的番茄色 */
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.my-coupon-button:hover {
  background-color: #FF4500; /* 更鲜艳的橙色 */
  transform: translateY(-2px);
}

.button-group {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.coupon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.coupon-item {
  background: linear-gradient(135deg, #FF8C00, #FFA500); /* 橙色渐变 */
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  width: calc(30% - 60px);
  max-width: 350px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}

.coupon-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.coupon-item:hover {
  transform: translateY(-15px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.coupon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.coupon-type {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

.coupon-title {
  font-size: 24px;
  color: #fff;
  text-align: right;
  width: calc(100% - 70px);
  margin-right: 10px; /* 为右上角的阴影留出空间 */
}

.coupon-content {
  color: #fff;
  font-size: 16px;
  line-height: 1.8;
}

.coupon-content p {
  margin: 0;
}

.coupon-content p:not(:last-child) {
  margin-bottom: 10px;
}

.el-dialog {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.el-dialog__header {
  background-color: #FF6347; /* 与按钮颜色相匹配 */
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 20px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.el-dialog__body {
  padding: 30px;
}

.el-dialog__footer {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  background-color: #f9f9f9;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.el-button {
  border-radius: 8px;
  font-size: 16px;
  padding: 10px 20px;
}

.el-button--primary {
  background-color: #4CAF50; /* 绿色 */
  border-color: #4CAF50;
}

.el-button--primary:hover {
  background-color: #45a049; /* 更深的绿色 */
  border-color: #45a049;
}

.el-button--danger {
  background-color: #F44336; /* 红色 */
  border-color: #F44336;
}

.el-button--danger:hover {
  background-color: #e53935; /* 更深的红色 */
  border-color: #e53935;
}
</style>
